<template>
  <div>
    <el-dialog
      title="考试计划"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
    <div>
    <el-row>
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础信息" name="first">
          <el-form ref="form"  :model="form" label-width="120px" :inline="true">
            <el-form-item label="试卷名称：" >
              <el-input style="width: 200px;" v-model="program.examinationPlanName" disabled></el-input>
            </el-form-item>
            <el-form-item label="及格分数：">
              <el-input style="width: 200px;" v-model="program.passScore" disabled></el-input>
            </el-form-item>
            <el-form-item label="开始时间：">
              <el-input style="width: 200px;" v-model="program.startDate" disabled></el-input>
            </el-form-item>
            <el-form-item label="结束时间：">
              <el-input style="width: 200px;" v-model="program.endDate" disabled></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row>
      <el-tabs v-model="activeName">
        <el-tab-pane label="参考人员" name="first">
          <el-table :data="program.studentList" style="width: 100%" height="300px">
            <el-table-column prop="studentName" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="referenceState" label="参考状态">
                <template slot-scope="scope">
                  <el-tag
                    :type="scope.row.status == 0 ? 'danger' : 'success'"
                    disable-transitions
                    >{{ scope.row.status == 0 ? "未完成" : "已完成" }}</el-tag
                  >
                </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-row>
    <el-row>
      <el-tabs v-model="activeName">
        <el-tab-pane label="课件列表" name="first">
          <el-table :data="program.courseList" style="width: 100%" height="300px" :default-sort = "{prop: 'courseSecond', order: 'descending'}">
            <el-table-column prop="courseName" label="课件名">
            </el-table-column>
            <el-table-column prop="courseSecond" label="课件时长(秒)" sortable>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
    getExaminationPlanInfo
} from "@/api/train/index.js";
export default {

  data() {
    return {
        dialogVisible:false,
        activeName: "first",
      form: {},
      tableData: [
      ],
      program:{
        programName:''
      }
    };
  },

  mounted() {},

  methods: {
    show(id){
        this.dialogVisible = true;
        getExaminationPlanInfo({
            examinationPlanId:id
        }).then(res=>{
            console.log(res);
            this.program = res.data
        })
    },
    handleClose(){
        this.dialogVisible = false;
    }
  },
};
</script>

<style lang="scss" scoped></style>
